﻿<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>index</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<!-- <meta http-equiv="refresh" content="5;url='https://gitee.com/iGaoWei'"> -->
		<link rel="stylesheet" href="css/comon0.css">
	</head>
	<script type="text/javascript">
		$(document).ready(function() {
			var html = $(".wrap ul").html()
			$(".wrap ul").append(html)
			var ls = $(".wrap li").length / 2 + 1
			i = 0
			ref = setInterval(function() {
				i++
				if (i == ls) {
					i = 1
					$(".wrap ul").css({
						marginTop: 0
					})
					$(".wrap ul").animate({
						marginTop: -'.52' * i + 'rem'
					}, 1000)
				}
				$(".wrap ul").animate({
					marginTop: -'.52' * i + 'rem'
				}, 1000)


			}, 2400);



			var html2 = $(".adduser ul").html()
			$(".adduser ul").append(html2)
			var ls2 = $(".adduser li").length / 2 + 1
			a = 0
			ref = setInterval(function() {
				a++
				if (a == ls2) {
					a = 1
					$(".adduser ul").css({
						marginTop: 0
					})
					$(".adduser ul").animate({
						marginTop: -'.5' * a + 'rem'
					}, 800)
				}
				$(".adduser ul").animate({
					marginTop: -'.5' * a + 'rem'
				}, 800)


			}, 4300);








		})
	</script>
	<body>
		<div class="loading">
			<div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
		</div>
		<div class="head">
			<h1><!-- <img src="picture/logo.png"> --><a href="#" style="color: white">鼎鲜团惠民补贴大盘</a></h1>
			<div class="weather"><img src="picture/weather.png"><span>多云转小雨</span><span>2017-12-30</span></div>
		</div>
		<div class="mainbox">
			<ul class="clearfix">
				<li>
					<div class="boxall" style="height: 2.7rem">
						<div class="alltitle">创业市场</div>

						<div class="sycm">
							<ul class="clearfix">
								<li>
									<h2>999</h2><span>高级会员</span>
								</li>
								<li>
									<h2>999</h2><span>互助订单</span>
								</li>
								<li>
									<h2>999</h2><span>互助金额</span>
								</li>
							</ul>
							<div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
							<ul class="clearfix">
								<li>
									<h2>1824</h2><span>排队中</span>
								</li>
								<li>
									<h2>1920</h2><span>已互助</span>
								</li>
								<li>
									<h2>19%</h2><span>完成率</span>
								</li>
							</ul>


						</div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 2.7rem">
						<div class="alltitle">消费市场</div>

						<div class="sycm">
							<ul class="clearfix">
								<li>
									<h2>999</h2><span>消费订单</span>
								</li>
								<li>
									<h2>999</h2><span>互助订单</span>
								</li>
								<li>
									<h2>999</h2><span>排队订单</span>
								</li>
							</ul>
							<div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
							<ul class="clearfix">
								<li>
									<h2>1824</h2><span>销售总额</span>
								</li>
								<li>
									<h2>1920</h2><span>互助金额</span>
								</li>
								<li>
									<h2>19%</h2><span>互助率</span>
								</li>
							</ul>
						</div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 2.7rem">
						<div class="alltitle">整体大盘</div>

						<div class="sycm">
							<ul class="clearfix">
								<li>
									<h2>999</h2><span>惠民总数</span>
								</li>
								<li>
									<h2>999</h2><span>营业总额</span>
								</li>
								<li>
									<h2>999</h2><span>排队总数</span>
								</li>
							</ul>
							<div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
							<ul class="clearfix">
								<li>
									<h2>1824</h2><span>营业总额</span>
								</li>
								<li>
									<h2>1920</h2><span>总返金额</span>
								</li>
								<li>
									<h2>19%</h2><span>总免单率</span>
								</li>
							</ul>
						</div>
						<div class="boxfoot"></div>
					</div>

				</li>
				<li>
					<div class="bar">
						<div class="barbox">
							<ul class="clearfix">
								<li class="pulll_left counter">685.66</li>
								<li class="pulll_left counter">24.14</li>
							</ul>
						</div>
						<div class="barbox2">
							<ul class="clearfix">
								<li class="pulll_left">创业市场免单池</li>
								<li class="pulll_left">消费市场免单池</li>
							</ul>
						</div>
					</div>
					<div class="map">
						<div class="map1"><img src="picture/lbx.png"></div>
						<div class="map2"><img src="picture/jt.png"></div>
						<div class="map3"><img src="picture/map.png"></div>
						<div class="map4" id="map_1"></div>
					</div>
				</li>
				<li>
					<div class="boxall" style="height:5.2rem">
						<div class="alltitle">实时创业市场</div>

						<div class="addnew">

							<div class="adduser">

								<!-- div占位符 -->
								<ul class="clearfix">

								<div id="data-container"></div>
								</ul>

								<script>
								    // 存储多个数据对象的数组
								    let dataArray = [
								      {
								        "会员号": "177***8854",
								        "状态": "待免单",
								        "金额": "1999.00"
								      },
								      {
								        "会员号": "177***6625",
								        "状态": "待免单",
								        "金额": "1999.00"
								      },
									  {

									    "会员号": "177***6625",
									    "状态": "待免单",
									    "金额": "1999.00"
									  },
									  {
									    "会员号": "177***6625",
									    "状态": "待免单",
									    "金额": "1999.00"
									  },
									  {
									    "会员号": "177***6625",
									    "状态": "待免单",
									    "金额": "1999.00"
									  },
									  {
									    "会员号": "177***6625",
									    "状态": "待免单",
									    "金额": "1999.00"
									  }
								    ];

									console.log(dataArray);
								    // 原始的 HTML 代码模板
								    let htmlTemplate = `
									<li class="clearfix">
								      <span class="pulll_left">
								        {会员号} - {状态}
								      </span>
								      <span class="pulll_right">
								        ￥{金额}
								      </span>
								    </li>
								    `;

								    // 遍历数组并生成完整的 HTML 代码
								    let finalHtml = '';
								    for (let data of dataArray) {
								      let htmlCode = htmlTemplate;
								      for (let key in data) {
								        let placeholder = "{" + key + "}";
								        htmlCode = htmlCode.replace(new RegExp(placeholder, "g"), data[key]);
								      }
								      finalHtml += htmlCode;
								    }
									console.log(finalHtml);
								    // 获取容器元素并插入生成的 HTML 代码
								    let container = document.getElementById("data-container");
								    if (container) {
								      container.innerHTML = finalHtml;
										console.log(container);
								    }

								  </script>



							</div>
						</div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 3.4rem">
						<div class="alltitle">实时消费市场</div>

						<!-- div占位符 -->
						<div class="wrap" id="dataWrap">
						        <ul>
						        </ul>
						    </div>
						<script>
						        // 定义 JSON 数据
						        const data = [
						            {
						                "phone": "138****5678",
						                "zt": "待免单",
						                "xf": "2025-01-15 10:00",
						                "je": 100
						            },
						            {
						                "phone": "139****4321",
						                "zt": "已免单",
						                "xf": "2025-01-14 15:30",
						                "je": 50
						            },
									{
									    "phone": "139****4321",
									    "zt": "已免单",
									    "xf": "2025-01-14 15:30",
									    "je": 50
									},
									{
									    "phone": "139****4321",
									    "zt": "已免单",
									    "xf": "2025-01-14 15:30",
									    "je": 50
									}
						        ];

						        // 获取要填充数据的 ul 元素
						        const ulElement = document.getElementById("dataWrap").querySelector("ul");

						        // 遍历 JSON 数据
						        data.forEach(item => {
						            // 创建 li 元素
						            const liElement = document.createElement("li");
						            // 创建 p 元素
						            const pElement = document.createElement("p");
						            // 设置 p 元素的内容
						            pElement.textContent = `${item["phone"]} - ${item["zt"]}   ￥ ${item["je"]}`;
						            // 将 p 元素添加到 li 元素中
						            liElement.appendChild(pElement);
						            // 将 li 元素添加到 ul 元素中
						            ulElement.appendChild(liElement);
									console.log(liElement);
						        });
						</script>




						<div class="boxfoot"></div>
					</div>
				</li>
			</ul>
		</div>
		<div class="back"></div>
		<script language="JavaScript" src="js/js.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
		<script type="text/javascript" src="js/area_echarts.js"></script>
		<script type="text/javascript">
			var v0 = 1000 //总
			var v1 = 353 //
			var v2 = 178 //
			var v3 = 68 //新增



			option6 = {
				series: [{
					type: 'pie',
					radius: ['70%', '80%'],
					color: '#0088cc',
					label: {
						normal: {
							position: 'center'
						}
					},
					data: [{
							value: v1,
							name: '新增会员',
							label: {
								normal: {
									formatter: v1 + '',
									textStyle: {
										fontSize: 20,
										color: '#fff',
									}
								}
							}
						},
						{
							value: v0,
							name: '老会员',
							label: {
								normal: {
									formatter: function(params) {
										return '占比' + Math.round(v1 / v0 * 100) + '%'
									},
									textStyle: {
										color: '#aaa',
										fontSize: 12
									}
								}
							},
							itemStyle: {
								normal: {
									color: 'rgba(255,255,255,.2)'
								},
								emphasis: {
									color: '#fff'
								}
							},
						}
					]
				}]

			};

			option7 = {
				series: [{
					type: 'pie',
					radius: ['70%', '80%'],
					color: '#fccb00',
					label: {
						normal: {
							position: 'center'
						}
					},
					data: [{
							value: v2,
							name: '新增领卡会员',
							label: {
								normal: {
									formatter: v2 + '',
									textStyle: {
										fontSize: 20,
										color: '#fff',
									}
								}
							}
						},
						{
							value: v0,
							name: '总领卡会员',
							label: {
								normal: {
									formatter: function(params) {
										return '占比' + Math.round(v2 / v0 * 100) + '%'
									},
									textStyle: {
										color: '#aaa',
										fontSize: 12
									}
								}
							},
							itemStyle: {
								normal: {
									color: 'rgba(255,255,255,.2)'
								},
								emphasis: {
									color: '#fff'
								}
							},
						}
					]
				}]
			};


			option8 = {


				series: [{

					type: 'pie',
					radius: ['70%', '80%'],
					color: '#62b62f',
					label: {
						normal: {
							position: 'center'
						}
					},
					data: [{
						value: v3,
						name: '女消费',
						label: {
							normal: {
								formatter: v3 + '',
								textStyle: {
									fontSize: 20,
									color: '#fff',
								}
							}
						}
					}, {
						value: v0,
						name: '男消费',
						label: {
							normal: {
								formatter: function(params) {
									return '占比' + Math.round(v2 / v0 * 100) + '%'
								},
								textStyle: {
									color: '#aaa',
									fontSize: 12
								}
							}
						},
						itemStyle: {
							normal: {
								color: 'rgba(255,255,255,.2)'
							},
							emphasis: {
								color: '#fff'
							}
						},
					}]
				}]
			};
		</script>
		<!--大屏-->
		<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
		<script type="text/javascript" src="js/jquery.countup.min.js"></script>
		<script type="text/javascript">
			$('.counter').countUp();
		</script>
	</body>
</html>